<template>
	<div>
		<div class="padding_common padding_bm"  v-if="!noMchtSwiper">
        <!-- 轮播图 -->
        <slide-img :divStyle="0" :bannerArry='banner'></slide-img>
        <div class="commonBox" ref='box' @click="$router.push({path:'/merchDetail',query:{'mchtId':$route.params.mchtId,moveTo:true}})">
          <img src="../../images/commont.png" alt="">
          <span class="commonNum"> {{mchtComNum}}条</span>
        </div>
      </div>
        <div class="business_infor business_ohter"
                v-infinite-scroll="moreList"
                infinite-scroll-disabled="loading"
                infinite-scroll-immediate-check = "true"
                infinite-scroll-distance="100">
         <div style="background: #F5F5F5;">
        <div class="whiteBg coupon_dtl_coupon coupon_dtl_coupon_new" v-for="couponItem in otherPageList" @click="JumpOrder(couponItem,businessInfo)">
          <div class="couponDiv" style="margin: 0;">
            <coupon-denomination :item="couponItem"></coupon-denomination>
          </div>
          <div class="card_info card_info_new">
            <div class="card_name">
              {{couponItem.name}}
              
            </div>
            <div class="coupon_info_item">
              <p class="star_con">
                <star :couponComScore="couponItem.comScore"></star>
              </p>
              <p class="info_pad" style="margin-bottom: .6rem;">{{couponItem.comNum}}
              </p>
              <img class="otherIcon" v-if="couponItem.promAppro=='buy'" src="../../images/cashIcon.png"/>
              <img class="otherIcon" v-if="couponItem.couponTypes=='third'" src="../../images/dui.png"/><p class="couponNum">剩余{{couponItem.surplusnum}}张</p>
            </div>        
            <!--<div class="coupon_info_item">
              <img v-if="couponItem.promAppro=='buy'" style="width: 1rem;height: 1rem;"
                   src="../../images/cashIcon.png"/>
              <img v-if="couponItem.couponTypes=='third'" style="width: 1rem;height: 1rem;" src="../../images/dui.png"/>
              <span>已出售  &nbsp;&nbsp;{{couponItem.soldnum}}  &nbsp;&nbsp;&nbsp;已使用  &nbsp;&nbsp;{{couponItem.usednum}}</span>
            </div>-->
          </div>
          <div class="priceDiv">
          	<p>{{couponItem.promAppro=='buy'?couponItem.cash:couponItem.valuation}}</p>
          	<span>{{couponItem.promAppro=='buy'?'元':'芸券'}}</span>
          </div>
          <div v-if="couponItem.promAppro=='buy'" class="coupon_btn" style="background:rgb(243,72,168);">购买</div>
          <div v-else class="coupon_btn">兑换</div>
        </div>
      </div>
               
        </div>
		 <no-data v-if="otherPageList.length == 0"></no-data>
        <div class="loading-box" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreFind"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo">免费券，可去<span style="color:#ed4f89;"><<每日福利>></span>查看哦</div>
    </div>
</template>
<script>
    import star from '../../componentes/global/star.vue'
    import couponNum from '../../componentes/global/couponNum.vue'
    import getData2 from '../../service/getData2.js'
    import getData4 from '../../service/getData4.js'
	import * as types from '../../vuex/types.js'
    import * as types1 from '../../vuex/appendType'
    import listLoading from '../../componentes/global/listLoading.vue'
	import { mapState } from 'vuex'
	import {Storage} from 'src/utils/storage.js'
	import {
    Toast
} from 'mint-ui';
	export default{
        data(){
            return{

                loading:true,
                noMoreFind:true,
                moreInfo:true,
                banner:[],
                mchtComNum:this.$route.query.mchtComNum||0,//可以携带评论数据
                noMchtSwiper:this.$route.query.noMchtSwiper
            }
        },
		components: {
            star,
            couponNum,
            listLoading,
            // cardImg
		},
        computed:{
            ...mapState({
                position:state => state.coupon.position,
                otherPageList:state => state.coupon.otherPageList,
                otherPageLimit:state => state.coupon.otherPageLimit,
                 userInfo: state => state.user.userInfo
            })
        },
        created:function(){
					this.$emit('header-info', {
			      title: '全部电子券',
			      isBack: true
			    })
            this.$store.commit(types1.OTHER);
            this.$store.commit(types1.OTHER_PAGE,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
             this.shopBanner()

        },
        methods:{
		shopBanner: function () {
        var me = this;
        getData2.shopBanner({
          method: 'post',
          data: {
            "aoData": "",
            "mchtId": me.$route.params.mchtId,
            "state": ""
          }
        }).then(function (rep) {
          // console.log(1111)
          me.banner = rep.content.list;
        })
      },
            clickMoreList:function(){
                if(!this.noMoreFind){//防止重复点击
                    return
                }
                var me=this;
                this.noMoreFind = false;
                this.$store.dispatch('businessDiscount',{method:'post',data:{"couponId":"","mchtId":me.$route.params.mchtId}}).then(function(rep){
                    if(rep.content.couponList){
                        if(rep.content.couponList.length < me.otherPageLimit){
                            setTimeout(function(){me.noMoreFind = true;},300);
                            me.moreInfo=false;
                        }
                        if(rep.content.couponList.length == me.otherPageLimit){
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreFind = false;
                        }
                    }else{
                        setTimeout(function(){me.noMoreFind = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreFind = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreFind = true;
                this.clickMoreList();

            },
            //挂单电子券
       JumpOrder:function(params,info2){

       	// 查看电子劵详情
      // 下个版本删除掉缓存
      Storage.set("couponInfo", params);
      if(params.promAppro=='buy'){
      	if(params.surplusnum==0){
      		  Toast({
		          message: "电子券已售完不可购买",
		          duration: 1000
		      });
		      return
      	}else{
      		 this.$router.push({
          name: 'couDetail',
          query: {
            seq: params.seqNo || params.id || '',
            couponId: params.couponId || '',
            mchtId: params.mchtId,
            usrPicId: params.usrPicId || '',
            usrId: this.userInfo.usrId || '',// 挂单用户ID
            buy:true,
            surplusnum:params.surplusnum
          }
        });
      	}
      	
      }else{
//    	 Storage.set("oneCouponMer",info2,true);
//      this.$router.push({'path':'/sellingCoupon/'+params.mchtId+'/'+params.couponId})

		
//        this.$router.push({
//          name: 'couDetail',
//          query: {
//            type: 'noExchange',
//            couponId: params.couponId,
//            mchtId: params.mchtId,
//            seq: params.seqNo || '',
//            usrId: params.usrId || '',
//            usrPicId: '',
//            surplusnum: params.surplusnum
//          }
//        });
          
          
           //赋值，跳转兑换券页面
	 	this.$store.commit('changeState', true)
	 	getData4.findSeqno({couponId: params.couponId,mchtId:params.mchtId}).then(res=>{
	 		if(res.content.list.length!=0){
	 			params.id=res.content.list[0].id
	 			params.usrId=res.content.list[0].usrId
	 				Storage.set('couponInfo', params, false);
			        this.$router.push({
			          path: "/exchange",
			          query: {
			            surplusnum: params.sellNum
			          }
			      })
	 		}else{
	 			  this.$router.push({
		          name: 'couDetail',
		          query: {
		            seq:  '',
		            couponId: params.couponId,
		            mchtId: params.mchtId,
		            usrPicId: '',
		            usrId: res.usrId || res.sellUsr || '' // 挂单用户ID
		          }
		        });
	 		}
	 	})
       
      
        

      }


//    Storage.set("oneCouponMer",info2,true);
//   this.$router.push({'path':'/sellingCoupon/'+info.mchtId+'/'+info.couponId})

    }
        },
	}
</script>
<style scoped="" lang="scss">
	.business_ohter{padding:0.667rem 0 0;}
	.voucherDiv{margin-top: 1rem; color:#110F0F;}
	.coupon_dtl_coupon_new{
		border-bottom: 10px solid #F5F5F5;
		margin: 0;
		padding: 1rem;
		position: relative;
	}
	.card_info_new{
		padding: 0 0 0 .667rem;
		width: 13rem;
		float: left;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		.card_name{
	  	font-size: 1.125rem;
	  	color: rgb(68,68,68);
	  }
	  .couponNum{
	  	font-size: 0.75rem;
	  	color: rgb(153,153,153);
       }
	}
	.otherIcon{
 	width: 1rem;
 	height: 1rem;
 	float: left;
 	margin-right: .3rem;
   }
   .priceDiv{
   	position: absolute;
   	right:4rem;
   	width: 5rem;
   	top: 1.5rem;
   	text-align: center;
   	& p{
 		font-size:1.5rem;
 		color: rgb(237,88,143);
 		position: relative;
 		top: .2rem;
 	}
 	& span{
 		font-size:0.75rem;
 		color: rgb(102,102,102)
 	}
   }
    .coupon_btn{
    font-size:0.875rem ;
 	float: right;
 	height: 2rem;
 	background: rgb(248,89,124);
 	color: #ffffff;
 	line-height: 2rem;
 	width: 5rem;
 	position: absolute;
 	right:-1.5rem;
 	top: 2.5rem;
 	text-indent: 1rem;
 	border-top-left-radius:1rem;
 	border-bottom-left-radius:1rem;
 }
 .commonBox{
    width:4.55rem;
    height:1.5rem;
    position:absolute;
    top:1rem;
    right:-.1rem;
    background:rgba(237,77,138,0.9);
    opacity:90%;
    border-top-left-radius:100px;
    border-bottom-left-radius:100px;
  }
  .commonBox img{
      padding-left:.7rem;
      vertical-align:-.2rem;
      width:1rem;
      height:1rem;
      line-height:1rem;
  }
  .commonNum{
    color:#fff;
    font-size:.8rem;
    padding-left:.2rem;
    line-height:1.5rem;
  }
  .padding_common{
  	padding: 0;
  }
</style>
